﻿@using viBook.Models
@model RegisterModel
@{
    ViewBag.Title = "Register";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
@section HeadContent{
    <link href="@Url.Content("~/Content/jquery.realperson.css")" rel="stylesheet" type="text/css"/>
    <script src="@Url.Content("~/Scripts/jquery.realperson.js")" type="text/javascript"> </script>
    <script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"> </script>
    <script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"> </script>
}
<div class="full">
    <h1>
        Sign up as an user</h1>
    <p>
        <a target="_blank">Users</a>
        can upload, comment and like books.
    </p>
</div>
<div id="main" class="main-full">
    <div class="group">
        <div class="col-about col-sign">
            <h2 class="section">
                Sign Up to...</h2>
            <ol class="gridsies group">
                <li>
                    <img alt="About-find" class="fig" src="../../Content/dribbble/images/about-find.png" />
                    <h3>
                        Find &amp; read</h3>
                    <p>
                        Discover all books that they’re uploaded by other members.</p>
                </li>
                <li>
                    <img alt="About-like" class="fig" src="../../Content/dribbble/images/about-like.png" />
                    <h3>
                        Love reading</h3>
                    <p>
                        A place for your love here. Show your love with books.</p>
                </li>
                <li>
                    <img alt="About-bucket" class="fig" src="../../Content/dribbble/images/about-bucket.png" />
                    <h3>
                        Upload books</h3>
                    <p>
                        Upload any books to share for all. More sharing, more receiving.</p>
                </li>
                <li>
                    <img alt="About-prospect" class="fig" src="../../Content/dribbble/images/about-prospect.png" />
                    <h3>
                        Become a member</h3>
                    <p>
                        Having many friends who have same interest.</p>
                </li>
                <li>
                    <img alt="About-contact" class="fig" src="../../Content/dribbble/images/about-contact.png" />
                    <h3>
                        Contact</h3>
                    <p>
                        Send any question to <a href="mailto:vibook.project@gmail.com">our email's adress</a>.</p>
                </li>
            </ol>
            <p class="note">
                <a href="@Url.Action("FAQ","Home")" target="_blank">See our FAQ <span>to learn
                    more</span></a></p>
        </div>
        <div class="col-60 session-form">
            <div class="sign-box group">
                @Html.Partial("_OpenIDPartial")
            </div>
            <h2 class="section">
                Or sign up <span class="meta">right here...</span></h2>
            @using (Html.BeginForm("Register", "Account", FormMethod.Post, new { @class = "gen-form with-messages" }))
            {
                <div class="form-field">
                    <fieldset>
                        <label for="UserName">
                            Username</label>
                        @Html.TextBoxFor(m => m.UserName, new { @class = "form-text" })
                    </fieldset>
                    <p id="user_msg" class="message">@Html.ValidationMessageFor(m => m.UserName)</p>
                    <div class="form-important">
                        Username only contains <b>a-z, A-Z, 0-9, ., _ or -</b> and <b>3-20</b> characters length.
                    </div>
                </div>
                <div class="form-field">
                    <fieldset>
                        <label for="DisplayName">
                            Display name</label>
                        @Html.TextBoxFor(m => m.DisplayName, new { @class = "form-text" })
                    </fieldset>
                    <p id="displayName_msg" class="message">@Html.ValidationMessageFor(m => m.DisplayName)</p>
                </div>
                <div class="form-field">
                    <fieldset>
                        <label for="Email">
                            Email</label>
                        @Html.TextBoxFor(m => m.Email, new { @class = "form-text" })</fieldset>
                    <p id="email_msg" class="message">@Html.ValidationMessageFor(m => m.Email)</p>
                    <div class="form-important">
                        <strong>IMPORTANT:</strong> You won't appear as a prospect until email is confirmed.
                    </div>
                </div>
                <div class="form-field">
                    <fieldset>
                        <label for="Password">
                            Password</label>@Html.PasswordFor(m => m.Password, new { @class = "form-text" })</fieldset>
                    <p class="message">@Html.ValidationMessageFor(m => m.Password)</p>
                    <p class="message">
                        Minimum 6 characters</p>
                </div>
                <div class="form-field last">
                    <fieldset>
                        <label for="ConfirmPassword">
                            Confirm Password</label>@Html.PasswordFor(m => m.ConfirmPassword, new { @class = "form-text" })</fieldset>
                    <p class="message">@Html.ValidationMessageFor(m => m.ConfirmPassword)</p>
                    <p class="message">
                        Minimum 6 characters</p>
                </div>

                <div class="form-field realperson-regen">
                    <fieldset>
                        <label for="RealPerson">
                            Captcha</label>
                        @Html.TextBoxFor(m => m.RealPerson, new { @class = "form-text" })
                        <p class="message">@Html.ValidationMessageFor(m => m.RealPerson)</p>
                        <div id="defaultReal">
                        </div>
                    </fieldset>
                </div>
                <div class="form-field no-label last">
                    <fieldset>
                        <input class="input-check" id="user_accepts_email" name="user[accepts_email]" type="checkbox"
                            value="1" /></fieldset>
                    <span>I agree with <a href="JavaScript:newPopup('@Url.Action("TermOfUse","Home")');" title="Terms of use">Terms of Use</a></span>
                </div>
                <div class="form-btns">
                    <input class="form-sub" id="create_acc_btn" name="commit" type="submit" value="Create Account" />
                    <a class="form-btn" href="@Url.Action("Index","Home")">Cancel</a>
                </div>
            }
        </div>
    </div>
</div>
@Html.Partial("RegisterJS")
